<template>
  <div class="csdn-datav">
    <div class="csdn-datav-header">
      <div class="time">
        <p>
          {{ time.hour > 9 ? time.hour : "0" + time.hour }}:{{
            time.min > 9 ? time.min : "0" + time.min
          }}:{{ time.seconds > 9 ? time.seconds : "0" + time.seconds }}
        </p>
        <dl>
          <dd>{{ time.days }}</dd>
          <dt>
            {{ time.year }}-{{
              time.month > 9 ? time.month : "0" + time.month
            }}-{{ time.day > 9 ? time.day : "0" + time.day }}
          </dt>
        </dl>
      </div>
      <div class="title">
        <span>{{mainTitle}}</span>
        <el-popover placement="bottom" popper-class="map-popover-pc" trigger="hover" v-model="visible">
          <div class="map-popover-box">
            {{popoverItem.desc}}
            <a :href="popoverItem.url" target="_blank">详情 ></a>
          </div>
          <img src="@/assets/img/question-pc.png" slot="reference" alt="">
        </el-popover>
      </div>
      <div class="nav">

      </div>

    </div>
    <div class="csdn-datav-body">
      <router-view></router-view>
      <!-- <Main></Main> -->
    </div>

  </div>
</template>
<script>
import { Loading } from 'element-ui'
import RankList from './rankList.vue'
import Bus from "@/common/bus"
import { getForceInfo, getHardcoreFanInfo, getFanDistribution, getInterestInfo } from '@/server/screen-data'
export default {
  data() {
    return {
      visible: false,
      mainTitle: '',
      rankTitle: '',
      listName: '',
      loadingOption: {
        lock: true, //lock的修改符--默认是false
        text: '数据加载中...', //显示在加载图标下方的加载文案
        spinner: 'el-icon-loading', //自定义加载图标类名
        background: 'rgba(0, 0, 0, 0.7)' //遮罩层颜色
        // target: document.querySelector('#table')//loadin覆盖的dom元素节点
      },
      navList: [
        {
          key: 'force',
          navTitle: '原力排名',
          name: '全网博主原力月度排名'
        },
        {
          key: 'fans',
          navTitle: '铁粉排名',
          name: '全网博主铁粉排名'
        },
        {
          key: 'interest',
          name: '城市技术兴趣排名',
          navTitle: '技术兴趣'
        },
        {
          key: 'join',
          navTitle: '参与项目',
          url: 'https://gitcode.net/csdn/csdn-datav'
        }
      ],
      popoverList: [
        {
          key: 'force',
          desc: '原力分数的增减原则',
          url: 'https://bbs.csdn.net/topics/602534373'
        },
        {
          key: 'fans',
          desc: 'CSDN铁粉介绍以及说明',
          url: 'https://bbs.csdn.net/topics/606708603'
        },
        {
          key: 'interest',
          desc: '技术兴趣分数的增减原则',
          url: 'https://bbs.csdn.net/topics/602534373'
        }
      ],
      popoverItem: '',
      time: {
        year: '',
        month: '',
        day: '',
        hour: '',
        min: '',
        seconds: '',
        days: ''
      },
      userItem: '',
      dropdownList: [],
      optionList:[],
      rankList: [],
      slideopen: true,
      rankData: [],
      city: '全国'
    }
  },
  components: {
    RankList,
    // Main,
    // Force
  },
  mounted() {
    this.changeData(this.navList[0] , 0)
    setInterval(() => {
      this.getCurrentDate()
    }, 1000)
  },
  methods: {
    changeData(data ,index) {
      if (data.key !== 'join') {
        this.mainTitle = data.name
        this.popoverItem = this.popoverList.find(it => it.key === data.key)
      }
      if (data.key === 'force') {
        this.rankTitle = '用户原力月榜'
        this.listName = '原力值'
      }
      if (data.key === 'fans') {
        this.rankTitle = '铁粉榜'
        this.listName = '铁粉数'
      }
      if (data.key === 'interest') {
        this.rankTitle = '城市技术月度兴趣榜'
        this.listName = '兴趣值'
      }
      this.getData(index)
    },
    async getData(index) {
      if(index !== 3){
          let loadingInstance = Loading.service(this.loadingOption)
      let funName = [getForceInfo() , getHardcoreFanInfo() , getInterestInfo() ]
      await funName[index].then(res => {
        if (res.status == 200) {
          this.optionList = res.data.data.cityInfoList
          Bus.$emit('getOptionList',this.optionList)

          this.rankData = res.data.data.countryTop
          this.rankList = res.data.data.countryTop
          this.dropdownList = res.data.data.cityInfoList.sort((a, b) => b.score - a.score).map(it => it.city)
        }
      })
        loadingInstance.close()
      }
     
    },
    clear() {
      if (!this.userItem) {
        this.rankData = this.rankList
      this.city = '全国'
      } else {
        this.userItem = null
        this.$refs.rankList.userItem = null;
      }
    },
    dropdownFn(val) {
      this.city = val
      this.rankData = this.optionList.find(it => it.city == val).list
    },
    rankFans(val){
      this.userItem = val
    },
    getCurrentDate() {
      var myDate = new Date()

      var year = myDate.getFullYear() //年

      var month = myDate.getMonth() + 1 //月

      var day = myDate.getDate() //日

      var hour = myDate.getHours() //时

      var min = myDate.getMinutes() //分

      var seconds = myDate.getSeconds() //秒

      var days = myDate.getDay()

      switch (days) {
        case 1:
          days = '星期一'

          break

        case 2:
          days = '星期二'

          break

        case 3:
          days = '星期三'

          break

        case 4:
          days = '星期四'

          break

        case 5:
          days = '星期五'

          break

        case 6:
          days = '星期六'

          break

        case 0:
          days = '星期日'

          break
      }
      this.time = {
        year,
        month,
        day,
        hour,
        min,
        seconds,
        days
      }
    }
  },
  created() {
    this.getCurrentDate()
  }
}
</script>
<style lang="scss">
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.map-popover-pc {
  background: #364366;
  border-color: #364366;
  margin-top: 20px !important;
  .popper__arrow,
  .popper__arrow::after {
    border-bottom-color: #364366 !important;
    // border-color: #364366 !important;
  }
  .map-popover-box {
    color: #fff;
    font-size: 14px;
    a {
      color: #77c0ff;
      font-size: 14px;
    }
  }
}
html,
body,
.app {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.csdn-datav {
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: auto;
  background: #0b1224;
  background-image: url('@/assets/img/map-back.png');
  background-size: cover;
  .csdn-datav-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    color: #77c0ff;
    // padding: 0 30px;
    height: 52px;
    .nav {
      display: flex;
      height: 100%;
      background: #1e2f56;
      min-width: 100px;
      flex: 1;
      align-items: center;
      justify-content: end;
      border-bottom: 1px solid #375a87;
      padding-right: 40px;
      .nav-list {
        display: none;
        position: absolute;
        top: 52px;
        width: 120px;
        // height: 100px;
        padding: 4px 0;
        left: -34px;
        background: #1b2b4f;
        border: 2px solid #365a87;
        z-index: 10;
        p,
        a {
          display: block;
          text-decoration: none;
          font-size: 16px;
          font-weight: 500;
          color: #77c0ff;
          height: 44px;
          width: 100%;
          line-height: 44px;
          text-align: center;
          &:hover,
          &.router-link-active {
            background: #141f38;
          }
        }
      }

      .nav-box {
        display: flex;
        align-items: center;
        position: relative;
        height: 100%;
        cursor: pointer;
        &:hover {
          .nav-list {
            display: block;
          }
          span {
            color: #77c0ff;
          }
          .nav-img {
            background: url('@/assets/img/nav-hover.png');
            background-size: cover;
          }
        }
      }
      .nav-img {
        width: 14px;
        height: 16px;
        background: url('@/assets/img/nav.png');
        background-size: cover;
        margin-right: 4px;
      }
    }

    .rank-list-box {
      padding-right: 40px;
      line-height: 64px;
      display: flex;
      align-items: center;
      min-width: 100px;
      height: 100%;
      background: #1e2f56;
      border-bottom: 1px solid #375a87;
      .force-slide {
        img {
          display: flex;
          width: 28px;
          height: 28px;
          margin-top: 18px;
          cursor: pointer;
          margin-right: 8px;
        }
        .force-slide-open {
          cursor: pointer;
          display: flex;
        }
      }
    }

    .time {
      padding-left: 40px;
      min-width: 330px;
      background: #1e2f56;
      border-bottom: 1px solid #375a87;
      flex: 1;
      font-size: 36px;
      font-weight: 500;
      display: flex;
      height: 100%;
      align-items: center;
      p {
        width: 150px;
      }
      dl {
        font-size: 14px;
        font-weight: 400;
        margin-left: 16px;
      }
    }
    .title {
      // flex: 1;
      min-width: 690px;
      text-align: center;
      background-image: url('@/assets/img/nav-bak.png');
      background-size: cover;
      height: 100%;
      line-height: 64px;
      display: flex;
      align-items: center;
      justify-content: center;

      img {
        width: 20px;
        height: 20px;
        margin-top: 26px;
        margin-left: 4px;
      }
    }
  }
  .csdn-datav-body {
    flex: 1;
    // overflow: auto;
  }
}
.user-rank-list {
  position: absolute;
  top: 90px;
  right: 40px;
  display: flex;
  .go_back {
    margin-right: 4px;
    padding-top: 10px;
  }
}
</style>